/*
 * @Author: your name
 * @Date: 2022-02-17 19:16:19
 * @LastEditTime: 2022-02-18 08:11:22
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \react-study\src\pages\Classification\index.tsx
 */
import { isTemplateLiteral } from "@babel/types";
import React, { Component, ChangeEvent, RefObject, createRef,FC } from "react";

import Search from "./../../components/Search";
import { data } from './data'
import {classProps, classState }  from './type'
import styles from "./index.module.css";
import { tabdata } from "components/Search/type";
const tabs= data;

export class Classification extends Component<classProps,classState>{
  state = {
    currentTabIndex: 0
  };

  componentDidMount(){
    this.doms.forEach((item, index) => {
      const { current } = item;
      if(current){
        this.observe(current, index);
      }
    })
  }

  doms: RefObject<HTMLDivElement>[] = tabs.map(() => createRef()) // {current: dom}[]

  observe = (dom: HTMLElement, index: number) => {
    const intersectionObserver = new IntersectionObserver((entries) => {
      if(entries[0].intersectionRatio <= 0){
        console.log(`'消失了',${index}`);

      }else{
        console.log(`'出现了',${index}`);
        this.setState({
          currentTabIndex: index
        })
      }
      // console.log(entries);
    })
    intersectionObserver.observe(dom)
  }

  // 点击标签的回调
  changeTabIndex = (index: number) => {
    this.setState({
      currentTabIndex: index
    })
  }

  // 渲染标签页
  renderTabs = () => {
    const { currentTabIndex } = this.state;
    return tabs.map((item, index) => (
      <div 
        className={index===currentTabIndex ? `${styles['tab-item']} ${styles['tab-choosen']}` : styles['tab-item']} 
        key={index}
        onClick={e=>this.changeTabIndex(index)}>
          <a href={'#'+item.cateName}>{item.cateName}</a>
      </div>
    ))
  }

  // 渲染商品列表
  renderContent = () => {
    return tabs.map((item, index) => (
      <div className={styles['tab-content']} key={index}>
        <div className={'observer-item'} ref={this.doms[index]}></div>
        <div id={item.cateName} className={styles['anchor']}></div>
        <div className={styles['tab-content-title']}>{item.cateName}</div>
        <div className={styles['tab-content-body']}>
          {item.secCategory.map((item, index)=>(
            <div className={styles['tab-content-wrap']} key={index}>
              <div className={styles['tab-content-img']}>
                <img src={item.icon} alt="" />
              </div>
              <div className={styles['tab-content-name']}>{item.secCateName}</div>
            </div>
          ))}
        </div>
      </div>
    ))
  }

  render() {
    //   const { inputValue } = this.state;
    return (
      <div className="wpt-page-container">
        <div className={styles["search-wrap"]}>
          <Search
            // value= {inputValue}
            // onChange={this.handleSearchChange}
            placeholder="嘻嘻x"
            // defaultValue="猫吃鱼"
            onSearch={(v) => {
              console.log("我要基于value去做我的业务逻辑了", v);
            }}
            // onFocus={() => {
            //   console.log("wo yao luyou !");
            // }}
            // onClearClick = {()=>{this.setState({inputValue: ''})}}
          />
        </div>
        <div className={styles["page-wrap"]}>
          <div className={styles["tab-wrap"]}>
            {this.renderTabs()}
          </div>
          <div className={styles["content-wrap"]}>
            {this.renderContent()}
          </div>
        </div>
      </div>
    );
  }
}

export default Classification;
